import React, { useState,useEffect } from 'react';
import { Table, Form, Button } from 'antd';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import Add from './addAlertList'
import styles from './styles.module.scss';



const mapStateToProps = state => ({ alertList: state.adminPage.alertList });

const mapDispatchToProps = dispatch => {
    return {
        getAlertList: dispatch.adminPage.getAlertList
    }
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(({ alertList, getAlertList }) => {
    const loading = alertList.length === 0;
    alertList.forEach((item,index)=>{
      item.key= index;
    })
    const tableColumn = [
        {
            title: '设备',
            key: 'device',
            dataIndex: 'device',
        },
        {
            title: '报警信息',
            key: 'alertMsg',
            dataIndex: 'alertMsg',
        },
        
    ];

    useEffect(() => {
        getAlertList();
    }, []);

    return (
        <div className={ styles.container }>
            {/* <Form layout="inline">
                <Form.Item>
                    <Add></Add>
                </Form.Item>
            </Form> */}
            <Table className={ styles.table } loading={ loading } dataSource={ alertList } bordered columns={ tableColumn }/>
        </div>
    );
}));